<template lang="pug">
    .searchInput
        svg.icon.searchIcon(aria-hidden="true")
            use(xlink:href='#icon-search')
</template>

<script type="es6">
	export default {
		name: 'searchInput',
		data () {
			return {
			}
		},
		methods: {},
		mounted(){
		}
	}
</script>

<style lang="stylus" scoped>
    @import "../../styles/common.styl"
    .searchInput
        width 12rem
        margin-left 1rem
        border-bottom 1px solid $assistantColor
        background $mainColor
        overflow hidden
        input
            padding .2rem
            border none
            font-size .65rem
            outline none
            color $assistantColor
            width 10rem
            line-height 1.05rem
            background $mainColor
            &:focus
                color $assistantColor
        .searchIcon
            display block
            float left
            z-index 1000
            color $assistantColor
            margin: .3rem .2rem 0 0
            font-size .9rem
        .cancel
            borderRadius(50%)
            color $mainColor
            background $assistantColor
            font-size .5rem
            padding .1rem
            position absolute
            right 3rem
            margin-top .3rem
            display none
</style>
